<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <meta name="keywords" content="商品详情页" />
    <meta name="description" content="商品详情页" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/detail.css}">
    <style type="text/css" rel="stylesheet">
        .cf70029{
         color: #323232;
        }
        .ft10{
        font-size: 16px;
        }
    </style>
</head>
<body>
<div class="main detail">
    <div class="main_con c323232 bgfff">
        <div class="detail_con rela">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <input type="hidden" name="productId" id="productId" th:attr="value=${map.productApis.productId}" >
                    <div class="swiper-slide"  th:each="imgs:${map.imgs}">
                        <!--<img class="w100" th:src="@{/imgs/uploads/f7c901b5.jpg}">-->
                        <img class="w100" th:src="@{${imgs}}" th:height="434.4px">
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<img class="w100" th:src="@{/shoppingApi/images/detail_pic.png}">-->
                    <!--</div>-->
                    <!--<div class="swiper-slide">-->
                        <!--<img class="w100" th:src="@{/shoppingApi/images/detail_pic.png}">-->
                    <!--</div>-->
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="pl15 pr15 pt10 pb10"><!--<label>~</label><label th:text="${map.maxProPrice}"></label>-->
                <p class="ft17" ><span >￥</span><label th:text="${map.minProPrice}">66</label></p>
                <p class="ft15 cf70029 mt10 mb10">
                    <span class="c323232">优惠后的最低价:</span><span class="ft10">￥</span><label th:text="${map.minyhPrice}">12.00</label>

                </p>
                <p class="ft12" th:text="${map.productApis.productDesc}">
                    日晒纳米洗衣片<span class="cf70029">（24片/袋）</span>（去污肤色洗衣片、贴身衣物洗衣
                    片遇水即溶、祛除顽固污迹、肤护色护衣。
                </p>
            </div>
            <!--<img class="back abs" th:src="@{/shoppingApi/images/detail_back.png}">-->
        </div>
        <ul class="ft15 bgfff">
            <li>
                <p class="lititle">
                    <span>省钱购</span>
                    <img th:src="@{/shoppingApi/images/detail_que.png}">
                </p>
                <div class="pl15 pr15 pb10">
                    <p>可使用兑换券:<span class="ft10 cf70029">￥</span><span class="cf70029"><label th:text="${map.procoupon}">20</label></span></p>
                    <p>可使用折扣券<span class="c646464">（最多）</span>:<span class="ft10 cf70029">￥</span><span class="cf70029"><label th:text="${map.YZDianzhus}">20</label></span></p>
                    <p>会员节省<span class="c646464">（最多）</span>:<span class="ft10 cf70029">￥</span><span class="cf70029"><label th:text="${map.hyjiesheng}">34</label></span></p>
                    <p>可使用消费积分:<span class="cf70029">不限额抵扣</span></p>
                    <p>可使用现金积分:<span class="cf70029">不限额抵扣</span></p>
                </div>
            </li>
            <li>
                <p class="lititle">
                    <span>增值福利</span>
                    <img th:src="@{/shoppingApi/images/detail_que.png}">
                </p>
                <div class="pl15 pr15 pb10">
                    <p>购买该商品最多可返<span style="{font-size: 3px}">(最多)</span><span class="cf70029">￥</span><span class="cf70029"><label th:text="${map.daiJinQuan}">24</label></span>代金券</p>
                    <p>分享该商品即可获得至少<span class="cf70029">￥</span><span class="cf70029">50.00</span>代金券</p>
                    <p>分享该商品即可获得<span style="font-size: 3px">(最多)</span><span class="cf70029">￥</span><span class="cf70029"><label th:text="${map.fenXiangZhuan}"></label></span>现金</p>
                </div>
            </li>
        </ul>
        <div class="line"></div>
        <div class="evaluation bgfff pl15 pr15">
            <p class="evaluation_title rela">
                <span>商品评价（10）</span>
                <span class="ft12 c969696 fr arrow mr10">查看全部</span>
            </p>
            <div class="flex pt15 pb15">
                <img class="userpic" th:src="@{/shoppingApi/images/userpic.png}">
                <div class="it1 ml15">
                    <p class="ft14 bold">粥小鱼</p>
                    <p class="ft10 c969696 mt5 mb10">08-13</p>
                    <p class="ft14 pover2">宝贝已经收到，效果很好非常的不错，给我的生活很大的帮助给我的生活很大的帮助给我的生活很大的帮助</p>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="goods_pics">
            <p class="ft17 cf70029 ftc">商品详情</p>
            <!--<img class="w100 db" th:src="@{/shoppingApi/images/detail_pi2.png}">-->
            <img class="w100 db" th:attr="src=@{${map.detailContents}}" >
        </div>
        <div class="line"></div>
        <!--选择规格-->
        <div class="specifications c646464" style="display: none">
            <div class="specifications_con bgfff rela">
                <div class="flex pl15 pr15 pt20 pb20">
                <span class="img">
                    <!--<img class="w100" th:src="@{/shoppingApi/images/classimg1.png}">-->
                    <img class="w100 db" th:attr="src=@{${map.imgUrl}}" >
                </span>
                    <div class="flex flex-col ft17 flex-pj ml15">
                        <p class="mt20 cf70029">
                            <span><span class="ft13">￥</span><label  th:text="${map.minProPrice}">36.00</label></span>/<span class="ml5">~￥<label th:text="${map.maxProPrice}">26.8</label></span>
                        </p>
                        <p class="ft12 cf70029">（赚￥<label th:text="${map.minLiLun}">12.5~￥26.8</label>）</p>
                        <p class="specifi ft10 c323232">
                            <span class="default">请选择规格</span>
                            <span class="gauge"></span>
                            <span class="size ml5"></span>
                        </p>

                    </div>
                </div>
                <div class="gauge gauges ft12 overflow c323232">
                    <p class="ft14 pl15">规格/颜色</p>
                    <ul>
                        <li th:each="proGuiges:${map.proGuige}">
                            <span><label th:text="${proGuiges.proColor}"></label></span>
                            <input type="hidden" name="guigeId" id="guigeId" th:attr="value=${proGuiges.guigeId}" >
                            <!--<span><label th:text="${proGuiges.proWeight}"></label></span>-->

                        </li>
                        <!--<li th:each="weights:${map.weight}">-->
                            <!--<span><label th:text="${weights}"></label></span>-->
                        <!--</li>-->
                        <!--<li th:each="proColors:${map.proColor}">-->
                            <!--<span><label th:text="${proColors}"></label></span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span>48片/袋</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span>36片/袋</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span>24片/袋+8小片</span>-->
                        <!--</li>-->
                    </ul>
                </div>
                <div class="gauge size ft12 overflow c323232">
                    <p class="ft14 pl15">尺码 /其他</p>
                    <ul>
                        <!--<li th:each="proSizes:${map.proSize}">-->
                            <!--<span th:text="${proSizes}">大号</span>-->

                        <li th:each="proGuiges:${map.proGuige}">
                            <span><label th:text="${proGuiges.proSize}"></label></span>
                        </li>
                        </li>
                        <!--<li>-->
                            <!--<span>中号</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<span>小号</span>-->
                        <!--</li>-->
                    </ul>
                </div>

                <p class="pl15 pr15 overflow num">
                    <span class="fl ft15 changtext">数量</span>
                    <span class="fr ft17 changenum">
                    <span class="minus">-</span>
                    <span>
                        <input type="number" value="1">
                    </span>
                    <span class="add">+</span>
                </span>
                </p>
                <p class="tip mt15 ftc ft10">
                    <span>请选择产品规格</span>
                </p>
                <p class="bottom_btn overflow ftc">
                    <span class="addcart">加入购物车</span>
                    <span class="buynow">立即购买</span>
                </p>
                <img class="close abs" th:src="@{/shoppingApi/images/close2.png}">
            </div>
        </div>
        <!--分享赚-->
        <!--<div class="sharediv">-->
            <!--<div class="sharediv_con">-->
                <!--<p>赚3.45</p>-->
                <!--<p class="ftc">1.只要你的好友</p>-->
            <!--</div>-->
        <!--</div>-->
        <div class="fixedBox50">
            <ul class="fixed-bottom bottom flex flex-ac flex-pc ftc bgfff">
                <li class="it1 like ft12">
                    <span class="dib">
                        <img th:src="@{/shoppingApi/images/detail_like.png}">
                    </span>
                    <p>收藏</p>
                </li>
                <li class="lineh">
                    <span class="lineh1"></span>
                </li>
                <li class="it1 cart ft12">
                    <a href="./cart.html" class="db">
                        <span class="dib rela">
                            <img th:src="@{/shoppingApi/images/detail_cart.png}">
                            <span class="num abs">88</span>
                        </span>
                        <p>购物车</p>
                    </a>
                </li>
                <li class="it1 buy">
                    <span class="ft17 cfff">立即购买</span>
                </li>
                <li class="it1 sharebtn">
                    <p class="ft15 cfff">分享赚</p>
                    <p class="ft12 cfff">赚￥<label th:text="${map.fenXiangZhuan}">12.5</label></p>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/swiper.min.js}"></script>
<script type="application/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView : 1,
        observer:true,
        observeParents:true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        }
    })
    /*返回上一页*/
    $(".back").on('click',function () {
        window.history.back(-1);
    })
    /*改变输入框的值*/
    $(".specifications_con .num input[type='number']").change(function () {
        var num = $(this).val()
        alert("数量："+num)
    })
    /*数量加*/
    $(".specifications_con .num .changenum .add").on('click',function () {
        var newval = Number($(this).prev().find(":input[type='number']").val())+1;
        $(this).prev().find(":input[type='number']").val(newval);
    })
    /*数量减*/
    $(".specifications_con .num .changenum .minus").on('click',function () {
        if(Number($(this).next().find(":input[type='number']").val())>1){
            var newval = Number($(this).next().find(":input[type='number']").val())-1;
            $(this).next().find(":input[type='number']").val(newval);
        }
    })
    /*首页加入购物车*/
    $(".bottom_btn .addcart").on('click',function () {
        var num = $(this).parents(".specifications_con").find(":input[type='number']").val();
        var productId=$('#productId').val();
        var guigeId=$('#guigeId').val();
      $.ajax({
          url:"/addCart?productId="+productId+"&guigeId="+guigeId+"&productCount="+num,
          success:function (result) {
              console.log("加入购物车！");
          }
      })
    })
    /*规格立即购买*/
    $(".bottom_btn .buynow").on('click',function () {
        var num = $(this).parents(".specifications_con").find(":input[type='number']").val();
        var productId=$('#productId').val();
        var guigeId=$('#guigeId').val();
        // window.location.href="./确认订单.html"
        window.location.href="/wap/directAddOrder?productId="+productId+"&guigeId="+guigeId+"&productCount="+num;
        $.ajax({
            type:'POST',
            url:"/wap/directAddOrder",
            data:{
                'productId':productId,
                'guigeId':guigeId,
                'productCount':num
            },
            success:function (result) {
                console.log(result);
            }
        })
    })
    /*规格页关闭*/
    $(".specifications_con .close").on('click',function () {
        $(".specifications").fadeToggle();
    })
    /*首页立即购买*/
    $(".fixedBox50 .buy").on('click',function () {
        $(".specifications").fadeToggle();
    })
    /*选择规格*/
    $(".specifications_con .gauges ul li").on('click',function () {
        if(!$(this).hasClass("active")){
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            var text = $(this).find("span").text();
            $(".specifi span.default").text('');
            $(".specifi span.gauge").text(text);
            $(".tip").fadeOut();
        }
    })
    /*选择尺码*/
    $(".specifications_con .size ul li").on('click',function () {
        if(!$(this).hasClass("active")){
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            var text = $(this).find("span").text();
            $(".specifi span.default").text('');
            $(".specifi span.size").text(text);
            $(".tip").fadeOut();
        }
    })
//
// $(function () {
//      var productId="199";
//     $.ajax({
//         url:"/wap/selectProductDetailById?productId="+productId,
//         success:function (result) {
//         // console.log("---->"+result);
//         }
//     })
// })


</script>
</html>